<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:23
 * @LastEditTime: 2020-08-24 19:09:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\views\Home.vue
-->
<template>
  <div class="home">
    <Layout>
      <Header>
        <div class="header">
          <img
            class="logoimg"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551624718911&di=4a7004f8d71bd8da84d4eadf1b59e689&imgtype=0&src=http%3A%2F%2Fimg105.job1001.com%2Fupload%2Falbum%2F2014-10-15%2F1413365052_95IE3msH.jpg"
          />
          <div class="userInfo">
            <img src="../assets/user1.jpg" alt />
            <span>{{userInfo.user_name}}</span>
          </div>
        </div>
      </Header>
      <Layout>
        <Sider hide-trigger>
          <leftnav></leftnav>
        </Sider>
        <Content>
          <router-view></router-view>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import leftnav from '../components/Nav/Nav'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Home',
  components: {
    leftnav
  },
  data() {
    return {
      useInfo: ''
    }
  },
  computed: {
    ...mapState('Login', ['userInfo'])
  },
  methods: {
    ...mapMutations('GetAuth', ['filter_routes'])
  }
}
</script>
<style lang="scss" scoped>
.home,
.ivu-layout {
  height: 100%;
  overflow: auto;
}
.ivu-layout-header {
  box-sizing: border-box;
  padding: 0;
}
.ivu-layout-header .header {
  height: 100%;
  background-color: #fff;
  padding: 0;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #333;
  padding: 0 30px;
  .logoimg {
    width: 120px;
  }
  .userInfo {
    height: 100%;
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
}
.ivu-layout-sider a {
  padding-left: 56px !important;
}
.ivu-layout-content {
  padding: 0px 24px 24px;
}
</style>
